<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
</head>

<body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 DELETE 请求</button>
    <script>
        /* 
            1. 函数的返回值为promise, 成功的结果为response, 异常的结果为error
            2. 能处理多种类型的请求: GET/POST/PUT/DELETE
            3. 函数的参数为一个配置对象
                {

                ​	url: '',  // 请求地址

                ​	method: '',  // 请求方式GET/POST/PUT/DELETE

                ​	params: {},  // GET/DELETE请求的query参数

                ​	data: {}, // POST或PUT请求的请求体参数 

                }
            4. 响应json数据自动解析为js对象
      */

        function axios({
            url,
            method = "GET",
            params = {},
            data = {}
        }) {
            return new Promise((resolve, reject) => {
                /* 处理query参数 */
                //根据params对象生成查询参数字符串:{a:1,b:2}=>a=1&b=2
                const queryStr = Qs.stringify(params)
                //如果有值,拼接到url
                if (queryStr) {
                    url += "?" + queryStr;
                }
                //将请求方式统一转为大写
                method = method.toUpperCase();
                //创建xhr对象
                const xhr = new XMLHttpRequest();
                //设置请求信息
                xhr.open(method, url)
                //绑定监听
                xhr.onreadystatechange = () => {
                    //请求完成
                    if (xhr.readyState === 4) {
                        const status = xhr.status;
                        if (status >= 200 && status <= 299) {
                            //创建response对象
                            const response = {
                                data: JSON.parse(xhr.responseText),
                                status,
                                statusText: xhr.statusText
                            }
                            //指定为成功的value
                            resolve(response)
                        } else { //请求失败
                            //创建error对象
                            const error = new Error('请求出错,status=' + status)
                            //指定为失败的reason
                            reject(error);
                        }
                    }
                }

                /* 处理body参数 */
                //发请求
                if (method === "GET") {
                    xhr.send()
                } else {
                    //指定相应的请求头
                    xhr.setRequestHeader('Content-Type', 'application/json')
                    xhr.send(JSON.stringify(data)) //指定JSON格式的请求体
                }
            })
        }


        /* 封装axios的静态方法 */
        axios.get = (url,config) => axios({...config,url,method:"GET"});

        axios.delete = (url,config) =>axios({...config,url,method:'DELETE'});

        axios.post = (url,data,config) =>axios({...config,url,method:'post',data});

        axios.put = (url,data,config) =>axios({...config,url,method:'put',data});
    </script>

    <script>
          const buttons = document.querySelectorAll('button')
          buttons[0].onclick = async() => {
            try{
            const response = await axios.get(
                'http://localhost:3000/movie',
                {
                    params:{//自定转换为query参数
                        id:2,
                        name:'大话西游'
                    }
                }
            )
            console.log(response)
            } catch(error){
                console.log(error)
                alert(error.message)
            }
        }
        // 添加
      buttons[1].onclick = async () => {
        // const response = await axios({
        //   method: 'post',
        //   url: 'http://localhost:3000/movie',
        //   data: {
        //     name: 'AA',
        //     director: 'BB'
        //   }
        // })

        const response = await axios.post(
          'http://localhost:3000/movie',
          {
            name: 'AA2',
            director: 'BB2'
          }
        )
        console.log(response.data)
      }

      // 更新 
      buttons[2].onclick = async () => {
        // const response = await axios({
        //   method: 'put',
        //   url: 'http://localhost:3000/movie/14',
        //   data: { // 内部会自动转换为Json, 并指定相应Content-Type请求头
        //     name: '野外生存记13',
        //     director: '贝爷13'
        //   }
        // })
        const response = await axios.put(
          'http://localhost:3000/movie/15',
          { 
            name: '野外生存记13',
            director: '贝爷13'
          }
        )
        console.log(response.data)
      }

      // 删除
      buttons[3].onclick = async () => {
        // const response = await axios({
        //   method: 'delete',
        //   url: 'http://localhost:3000/movie/14',
        // })

        const response = await axios.delete('http://localhost:3000/movie/15')
        console.log(response.data)
      }
    </script>
</body>

</html>